<template>
  <div class="px-[8px] py-[16px]">
    <div class="flex items-center">
      <img src="../../static/logo.png" class="w-[50px] h-[43px]" alt="" srcset="" />
      <div class="text-[#007ab1] text-[16px] title_font ml-[8px]">
        国家新乡经济技术开发区管理委员会
      </div>
    </div>

    <div class="w-[100%] h-[1px] bg-[#007ab1] mt-[8px]"></div>

    <div id="u99_div" class="mt-[16px]">
      <div
        class="flex items-center pb-[16px] w-[100%] px-[20px] relative left-[-12px] bottom-[8px] bg-[#fff]"
      >
        <div id="u103">刘文君</div>
        <div class="mx-[8px] text-[#007ab1]">|</div>
        <div class="ax_default">
          <div class="flex">新乡经济技术开发区</div>
          <div>党工委副书记、管委会主任</div>
        </div>
      </div>

      <div class="px-[16px] w-[100%] px-[24px] relative left-[-12px] bottom-[8px] bg-[#fff]">
        <div class="flex items-center">
          <img src="../../static/u106.svg" alt="" class="w-[11px] h-[11px]" srcset="" />
          <div class="ax_default ml-[10px]">13598600099</div>
        </div>

        <div class="flex items-center mt-[10px]">
          <img src="../../static/u106.svg" alt="" class="w-[11px] h-[11px]" srcset="" />
          <div class="ax_default ml-[10px]">xxjkqswj@163.com</div>
        </div>

        <div class="flex items-center mt-[10px]">
          <img src="../../static/u106.svg" alt="" class="w-[11px] h-[11px]" srcset="" />
          <div class="ax_default ml-[10px]">新乡经济技术开发区管理委员会</div>
        </div>
      </div>
    </div>

    <div class="flex mt-[16px]">
      <!-- <div
        class="ax_default !text-[#30b6f9] rounded-[4px] py-[4px] mr-[4px] flex-1 border-[1px] border-solid border-[#30b6f9] flex items-center justify-center"
        open-type="share"
        @click="handlerClickCallingCard"
      >
        发名片
      </div> -->
      <button class="ax_default !text-[#30b6f9] rounded-[4px] py-[4px] mr-[4px] flex-1 border-[1px] border-solid border-[#30b6f9] flex items-center justify-center"
      open-type="share">分享</button>
      <div
        class="ax_default rounded-[4px] py-[4px] flex-1 !text-[#fff] bg-[#30b6f9] ml-[4px] flex items-center justify-center"
        @click="handlerClickSave"
      >
        存入通讯录
      </div>
    </div>

    <div class="mt-[16px] flex overflow-scroll">
      <div
        class="ax_default min-w-[109px] border-[1px] border-solid border-[#b5b5b5] rounded-[4px] p-[12px]"
        @click="callPhone"
      >
        <div class="flex items-center">
          <div>1</div>
          <div>拨打电话</div>
        </div>
        <div>13598600099</div>
      </div>

      <div
        class="ax_default min-w-[139px] mx-[16px] border-[1px] border-solid border-[#b5b5b5] rounded-[4px] p-[12px]"
        @click="setClipboardData"
      >
        <div class="flex items-center">
          <div>1</div>
          <div>邮箱</div>
        </div>
        <div>xxjkqswj@163.com</div>
      </div>

      <div
        class="ax_default min-w-[207px] border-[1px] border-solid border-[#b5b5b5] rounded-[4px] p-[12px]"
      >
        <div class="flex items-center">
          <div>1</div>
          <div>地址</div>
        </div>
        <div class="break-normal">新乡经济技术开发区管理委员会</div>
      </div>
    </div>

    <cardTitleVue title="经开视频"></cardTitleVue>

    <div class="rounded-[12px] mt-[8px] overflow-hidden">
      <video poster="../../static/u31.jpg" class="w-[100%] h-[237px]"></video>
    </div>

    <cardTitleVue title="经开介绍"></cardTitleVue>

    <div
      class="rounded-[12px] mt-[8px] px-[8px] h-[177px] overflow-hidden bg-[#e3f2f9] flex items-center justify-center"
    >
      <img src="../../static/u100.png" class="w-[155px] h-[116px] mr-[8px]" alt="" srcset="" />
      <div class="ax_default">
        <div class="text-[12px]">
          新乡经济技术开发区位于新乡市区东部，距主城区8.5公里，居新乡市域之中。始建于2003年，······
        </div>
        <div class="flex justify-end text-[12px] text-[#30B6F9] mt-[8px]">了解更多</div>
      </div>
    </div>

    <cardTitleVue title="魅力经开"></cardTitleVue>

    <div
      class="rounded-[12px] mt-[8px] p-[8px] h-[177px] overflow-hidden bg-[#e3f2f9] flex items-center justify-center"
    >
      <img src="../../static/u99.jpeg" class="w-[100%] h-[100%] rounded-[10px]" alt="" srcset="" />
    </div>

    <div
      class="rounded-[12px] mt-[8px] p-[8px] h-[177px] overflow-hidden bg-[#e3f2f9] flex items-center justify-center"
    >
      <img src="../../static/u89.jpg" class="w-[100%] h-[100%] rounded-[10px]" alt="" srcset="" />
    </div>

    <div
      class="rounded-[12px] mt-[8px] p-[8px] h-[177px] overflow-hidden bg-[#e3f2f9] flex items-center justify-center"
    >
      <img src="../../static/u92.png" class="w-[100%] h-[100%] rounded-[10px]" alt="" srcset="" />
    </div>

    <div
      class="rounded-[12px] mt-[8px] p-[8px] h-[177px] overflow-hidden bg-[#e3f2f9] flex items-center justify-center"
    >
      <img src="../../static/u95.jpg" class="w-[100%] h-[100%] rounded-[10px]" alt="" srcset="" />
    </div>
  </div>
</template>

<script setup lang="ts">
import cardTitleVue from "../../components/cardTitle/index.vue";



const handlerClickCallingCard = () => {
  console.log("handlerClickCallingCard");
//   uni.share({
// 	provider: "weixin",
// 	scene: "WXSceneSession",
// 	type: 0,
// 	href: "http://uniapp.dcloud.io/",
// 	title: "魅力经开",
// 	summary: "这是我的名片，请你惠存！",
// 	imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
// 	success: function (res) {
// 		console.log("success:" + JSON.stringify(res));
// 	},
// 	fail: function (err) {
// 		console.log("fail:" + JSON.stringify(err));
// 	}
// });
};
const setClipboardData = () => {
  uni.setClipboardData({
	data: 'xxjkqswj@163.com',
	success: function () {
		console.log('success');
	}
});
}
const callPhone = () =>{
  uni.makePhoneCall({
	phoneNumber: '13598600099' //仅为示例
});
}
const handlerClickSave = () => {
  console.log("handlerClickSave");
  uni.addPhoneContact({
    nickName: "刘文君",
    firstName: "刘文君",
    remark: "刘文君",
    mobilePhoneNumber: "13598600099",
    email: "xxjkqswj@163.com",
    workAddressCountry: "中国大陆",
    workAddressStreet: "新乡经济技术开发区管理委员会",
    success: function () {
      console.log("success");
      uni.showToast({
        title: "添加成功",
        icon: "success",
        duration: 2000,
      });
    },
    fail: function () {
      console.log("fail");
      uni.showToast({
        title: "添加失败",
        icon: "success",
        duration: 2000,
      });
    },
  });
};
</script>

<style>
.title_font {
  font-family: "Arial Negreta", "Arial Normal", Arial, sans-serif;
  border-width: 0px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 1.5px;
  color: rgb(0, 122, 177);
}

#u103 {
  display: flex;
  font-family: "黑体 Bold", 黑体, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 26px;
  letter-spacing: 2.3px;
  margin-left: 16px;
}

.ax_default {
  font-family: "Arial Normal", "Arial", sans-serif;
  font-style: normal;
  font-size: 13px;
  letter-spacing: normal;
  color: #333333;
  vertical-align: none;
  line-height: normal;
  text-transform: none;
}

#u99_div {
  background-image: inherit;
  background-position: inherit;
  background-size: inherit;
  background-repeat: inherit;
  background-attachment: inherit;
  background-origin: inherit;
  background-clip: inherit;
  background-color: rgb(255, 255, 255);
  border: none;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 5px;
}
</style>
